<template>
  <div class="detailes-page" :key="detailesPage">
    <!-- 计算中 -->
    <!-- <div v-if="configStatus === 1" class="pubChunk">
      <span class="title"> 数据后台计算中，请稍后查看。。。。 </span>
    </div>
    <div v-else-if="configStatus === 2"> -->

    <detail-header
      ref="detailHeader"
      :titleDataType="titleDataType"
      :chart_date_parent="chart_date"
      @cutDataHandle="cutDataHandle"
      :strategy_dels_parent.sync="strategy_dels"
    ></detail-header>
    <!-- 分类、指数、表单 -->
    <div class="nav flex-h-sb">
      <div
        class="nav-left flex"
        v-if="hasClassify === true || hasClassify === 'true'"
      >
        <div
          class="nav-item"
          :class="{ typePage: typePage == 1 }"
          @click="curNavHandle(1)"
        >
          投资子投资分类分析
        </div>
        <div
          class="nav-item"
          :class="{ typePage: typePage == 2 }"
          @click="curNavHandle(2)"
        >
          投资子投资分析
        </div>
      </div>
      <div class="nav-right flex-v-center">
        <span style="font-size: 14px; color: #606266; font-weight: 700">
          对比指标：
        </span>
        <indexSelectTree
          style="margin: 0 30px 0 10px"
          :indexType.sync="dataForm.types"
          size="small"
          :maxNum="5"
          :clearable="false"
          @contrastOptionsObj="contrastOptionsObj"
          :width="300"
        ></indexSelectTree>
        <el-button size="small" type="primary" @click="saveParamsHandle">
          应用
        </el-button>
        <el-button size="small" @click="refresh">重置</el-button>
      </div>
    </div>
    <!-- 投资子分类-母盘净值 -->
    <mbNetWorth
      ref="mbNetWorth"
      :typePage_parent="typePage"
      :analysisType.sync="analysisType"
      :indexTypes="dataForm.types"
      :chart_date_parent="chart_date"
      :moreChart1NavList2="moreChart1NavList2"
      :contrastOptions_obj_parent="contrastOptions_obj"
      v-if="
        (hasClassify === true || hasClassify === 'true') && analysisType === 2
      "
    ></mbNetWorth>
    <!-- 投资子投资-母盘净值 -->
    <!-- 历史走势图 -->
    <lineEcahrts
      ref="lineEcarts"
      :titleDataType="titleDataType"
      :navActive="typePage"
      :analysisType.sync="analysisType"
      :chart1List.sync="chart1List"
      :chart_date_parent.sync="chart_date"
      :indexTypes="dataForm.types"
      :moreChart1NavList2.sync="moreChart1NavList2"
      @beyondIncome2Change="beyondIncome2ChangeHandle"
      @beyondIncome2Change2="beyondIncome2Change2Handle"
      :one_contrastOptions_list_parent="one_contrastOptions_list"
      :contrastOptions_obj_parent="contrastOptions_obj"
    ></lineEcahrts>
    <!-- 收益风险指标 -->
    <riskTable
      ref="riskTable"
      :navActive="typePage"
      :titleDataType="titleDataType"
      :chart1List="chart1List"
      :chart_date_parent.sync="chart_date"
      :indexTypes="dataForm.types"
      :contrastOptions_obj_parent="contrastOptions_obj"
    ></riskTable>
    <!-- 收益图表 -->
    <earnTable
      ref="earnTable"
      :navActive="typePage"
      :titleDataType="titleDataType"
      :indexTypes="dataForm.types"
      :chart_date_parent.sync="chart_date"
      :contrastOptions_obj_parent="contrastOptions_obj"
      :one_contrastOptions_list_parent="one_contrastOptions_list"
    ></earnTable>
    <!-- 历史净值 -->
    <netWorthTable
      ref="netWorthTable"
      :titleDataType="titleDataType"
    ></netWorthTable>
    <!-- 盈亏报告 -->
    <!-- v-if="profitLossDialogVisible" -->
    <profitLossDialog
      :profitLossDialogVisible.sync="profitLossDialogVisible"
      :investId="Number(investType) !== 1 ? strategyId : compositionId"
      :level="Number(investType) !== 1 ? 4 : typePage === 1 ? 1 : 6"
    ></profitLossDialog>
    <div class="fixTipReport" @click="profitLossDialogVisible = true">
      <i class="iconfont icon-ziliaoduibi"></i>
      <span>盈亏报告</span>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import { parseTime } from "@/utils";
import detailHeader from "./detail-header.vue";
import lineEcahrts from "./lineEcahrts.vue";
import indexSelectTree from "@/components/investComn/indexSelectTree.vue";
import riskTable from "./riskTable.vue";
import mixin from "./mixins";
import earnTable from "./earnTable.vue";
// import relevanceTable from './relevanceTable.vue'
import netWorthTable from "./netWorthTable.vue";
import mbNetWorth from "./mbNetWorth.vue";
import profitLossDialog from "@/views/afterManage/component/profitLossDialogRate.vue";

// import { getSaveConfigCompositionInfoStatus } from '@/api/combManage'

export default {
  mixins: [mixin],
  name: "StrategyCombManageDetails",
  components: {
    detailHeader,
    indexSelectTree,
    lineEcahrts,
    riskTable,
    earnTable,
    netWorthTable,
    mbNetWorth,
    profitLossDialog,
  },

  data() {
    return {
      titleDataType: 0, // MOM时 期货0/拟合1数据
      detailesPage: 0,
      profitLossDialogVisible: false,
      dataForm: {
        types: [],
      },
      typePage: 1,
      chart1List: [],
      strategy_dels: {},
      chart_date: [],
      one_contrastOptions_list: [],
      moreChart1NavList2: [], // 日期选项中更多的内容

      analysisType: 1,
    };
  },
  created() {},
  watch: {
    strategy_dels: {
      handler(newVal, oldVal) {
        // 多开标签 设置
        this.tempRoute = Object.assign({}, this.$route);
        this.$setTagsViewTitle(
          this.tempRoute,
          `净值分析[投资列表]-${newVal.strategyName}`
        );
        document.title = `净值分析[投资列表]-${newVal.strategyName}`;
        this.dataForm.types = newVal.investIndex || [162];
        const start_date = parseTime(newVal.makeTime, "{y}-{m}-{d}");
        const end_date = parseTime(newVal.netWorthDetialBean.networthTime);
        this.chart_date = [start_date, end_date];
        this.$nextTick(() => {
          this.$refs.lineEcarts.chartInit(newVal);
          this.$refs.riskTable.init(newVal);
          this.$refs.earnTable.init(newVal);
          this.$refs.netWorthTable.init(newVal);
          // if (this.hasClassify === true || this.hasClassify === 'true') {
          // if(this.analysisType === 2) {
          // this.$refs.mbNetWorth.init(newVal)
          // }
          // }
        });
      },
      deep: true,
    },
    chart_date: {
      handler(newVal, oldVal) {
        console.log(newVal);
      },
      deep: true,
    },
    typePage: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.earnTable.init(this.strategy_dels);
        });
      },
      deep: true,
    },
    "dataForm.types": {
      handler(newVal, oldVal) {
        if (newVal.length > 5) {
          this.$message({
            message: "最多选择5个对比指标",
            type: "warning",
            duration: 2000,
          });
          this.$nextTick(() => {
            this.dataForm.types = oldVal;
          });
        } else {
          this.contrastOptionsObj();
        }
      },
      deep: true,
    },
  },
  // computed: {
  //   types: function () {
  //     return this.dataForm.types
  //   },
  // },
  methods: {
    cutDataHandle(i) {
      this.titleDataType = i;
      this.detailesPage++;
    },
    // 判断组合计算状态
    // async getSaveConfig() {
    //   const compositionId = this.$route.params && this.$route.params.id; // 多开标签
    //   this.configStatus = await getSaveConfigCompositionInfoStatus(compositionId);
    //   if (this.configStatus === 2) {
    //     return
    //   }
    //   this.t1 = setInterval(async() => {
    //     this.configStatus =  await getSaveConfigCompositionInfoStatus(compositionId);
    //     this.t1_num++;
    //     if (this.t1_num >= 30 || this.configStatus === 2) {
    //       clearInterval(this.t1);
    //       this.t1_num = 0;
    //     }
    //   }, 1000);
    // },
    beyondIncome2ChangeHandle(val) {
      this.dataForm.types = [val, ...this.dataForm.types];
    },
    beyondIncome2Change2Handle(val) {
      this.dataForm.types = val;
    },
    realContrastHnadle() {
      this.$refs.detailHeader.realContrast();
    },
    clearRealquery(val) {
      this.realquery = val;
    },
    curNavHandle(i) {
      this.typePage = i;
    },
    // 应用
    saveParamsHandle() {
      // this.getIndexRiskByIndexTypeAndTime(this.formData.types)
      // if (this.cns_active != 1) {
      //   this.$nextTick(() => {
      //     this.$refs.lineEcarts.getnetWorthLine(
      //       this.chart_date[0],
      //       this.chart_date[1],
      //     )
      //   })
      // } else {
      //   this.findIntersection(this._chart_date[0], this._chart_date[1])
      // }
    },
    contrastOptionsObj(obj) {
      if (obj) {
        this.contrastOptions_obj = obj;
      } else {
        obj = this.contrastOptions_obj;
      }
      if (Object.keys(obj).length && this.dataForm.types.length) {
        const oneList = [];
        this.dataForm.types.forEach((item) => {
          oneList.push({
            id: item,
            name: obj[item],
          });
        });
        this.one_contrastOptions_list = oneList;
      }
      if (this.chart_date[0]) {
        this.$nextTick(() => {
          this.$refs.lineEcarts.getnetWorthLine(
            this.chart_date[0],
            this.chart_date[1]
          );
        });
      }
    },
    refresh() {
      location.reload();
    },
  },
};
</script>
<style lang="scss" scoped>
.detailes-page {
  padding: 20px;
  min-height: 100vh;
  background: #f0f2f5;
}
.title {
  padding: 20px;
  text-align: center;
  font-size: 26px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #262626;
}
.nav {
  height: 56px;
  margin-top: 20px;
  padding: 0 24px;
  background: #ffffff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  .nav-left {
    font-size: 18px;
    font-weight: 400;
    color: #262626;
    .nav-item {
      font-family: PingFangSC-Regular, PingFang SC;
      cursor: pointer;
      line-height: 56px;
      & + .nav-item {
        margin-left: 48px;
      }
    }
  }
  .typePage {
    color: #1890ff;
    border-bottom: 2px solid #1890ff;
  }
}
</style>
